Markdown 的设计哲学
Markdown 的目標是實現「易讀易寫」
不過最需要強調的便是它的可讀性。一份使用 Markdown 格式撰寫的文件應該可以直接以純文字發佈,並且看起來不會像是由許多標籤或是格式指令所構成。
Markdown 的語法有個主要的目的:用來作為一種網路內容的寫作用語言。
标题
Markdown 语法:
1 | # 第一级标题 `<h1>` |
效果如下:
第一级标题 <h1>
第二级标题 <h2>
第六级标题 <h6>
强调
Markdown 语法:
1 | *这些文字会生成`<em>`* |
效果如下:
这些文字会生成<em>
_这些文字会生成<u>
_
这些文字会生成<strong>
这些文字会生成<strong>
换行
四个及以上空格加回车。
列表
无序列表
Markdown 语法:
1 | * 项目一 无序列表 `* + 空格键` |
效果如下:
- 项目一 无序列表
* + 空格键
- 项目二
- 项目二的子项目一 无序列表
TAB + * + 空格键
- 项目二的子项目二
- 项目二的子项目一 无序列表
有序列表
Markdown 语法:
1 | 1. 项目一 有序列表 `数字 + . + 空格键` |
效果如下:
- 项目一 有序列表
数字 + . + 空格键
- 项目二
- 项目三
- 项目三的子项目一 有序列表
TAB + 数字 + . + 空格键
- 项目三的子项目二
- 项目三的子项目一 有序列表
任务列表(Task lists)
Markdown 语法:
1 | - [ ] 任务一 未做任务 `- + 空格 + [ ]` |
效果如下:
- [ ] 任务一 未做任务
- + 空格 + [ ]
- [x] 任务二 已做任务
- + 空格 + [x]
图片
Markdown 语法:
1 | ![GitHub set up](http://zh.mweb.im/asset/img/set-up-git.gif) |
链接
Markdown 语法:
1 | email <example@example.com> |
效果如下:
Email 连接: example@example.com
连接标题Github网站
自动生成连接像: http://www.github.com/ 这样
区块引用
Markdown 语法:
1 | 某某说: |
效果如下:
某某说:
第一行引用
第二行费用文字
行内代码
Markdown 语法:
1 | 像这样即可:`<addr>` `code` |
效果如下:
像这样即可:<addr>
code
多行或者一段代码
Markdown 语法:
1
2
3
4
5
6
function fancyAlert(arg) {
if(arg) {
$.facebox({div:'#foo'})
}
}
效果如下:
1 | function fancyAlert(arg) { |
顺序图或流程图
Markdown 语法:
1
2
3
张三->李四: 嘿,小四儿, 写博客了没?
Note right of 李四: 李四愣了一下,说:
李四-->张三: 忙得吐血,哪有时间写。
1
2
3
4
5
6
7
8
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认?
st->op->cond
cond(yes)->e
cond(no)->op
效果如下( Preferences
- Themes
- Enable sequence & flow chart
才会看到效果 ):
1 | 张三->李四: 嘿,小四儿, 写博客了没? |
1 | st=>start: 开始 |
更多请参考:http://bramp.github.io/js-sequence-diagrams/, http://adrai.github.io/flowchart.js/
表格
Markdown 语法:
1 | 第一格表头 | 第二格表头 |
效果如下:
第一格表头 | 第二格表头 |
---|---|
内容单元格 第一列第一格 | 内容单元格第二列第一格 |
内容单元格 第一列第二格 多加文字 | 内容单元格第二列第二格 |
删除线
Markdown 语法:
加删除线像这样用: ~~删除这些~~
效果如下:
加删除线像这样用: 删除这些
分隔线
以下三种方式都可以生成分隔线:
***
*****
- - -
效果如下:
脚注(Footnote)
Markdown 语法:
1 | 这是一个脚注:[^sample_footnote] |
效果如下:
这是一个脚注:sample_footnote
sample_footnote. 这里是脚注信息 ↩
注释和阅读更多
Actions->Insert Read More Comment 或者 Command + .
注 阅读更多的功能只用在生成网站或博客时,插入时注意要后空一行。
TOC
Markdown 语法:
1 | [TOC] |
效果如下:
[TOC]
Hexo 标签插件
引用块
1 | {% blockquote [author[, source]] [link] [source_link_title] %} |
效果如下
content
引用书上的句子
1 | {% blockquote David Levithan, Wide Awake %} |
效果如下
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
引用网络上的文章
1 | {% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %} |
效果如下
Every interaction is both precious and an opportunity to delight.
代码块
在文章中插入代码。
1 | {% codeblock [title] [lang:language] [url] [link text] %} |
普通代码块
1 | {% codeblock %} |
1 | alert('Hello World!'); |
指定语言
1 | {% codeblock lang:objc %} |
1 | [rectangle setX: 10 y: 10 width: 20 height: 20]; |
附加说明
1 | {% codeblock Array.map %} |
1 | array.map(callback[, thisArg]) |
附加说明和网址
1 | {% codeblock _.compact http://underscorejs.org/#compact Underscore.js %} |
1 | _.compact([0, 1, false, 2, '', 3]); |
反引号代码块
另一种形式的代码块,不同的是它使用三个反引号来包裹。
1 | ``` [language] [title] [url] [link text] code snippet ``` |
Image
在文章中插入指定大小的图片。
1 | <img src="/path/to/image" class="[class names]" title="[width] [height] [title text [alt text]]"> |
Link
1 | <a>text url [external] [title]</a> |
注意
本文参考MWeb软件中的MarkDown说明和Hexo文档。